<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>商品防伪查询</title>
    <link rel="stylesheet" href="/elementui/index.css">
    <style>
        .text {
            font-size: 14px;
        }

        .item {
            margin-bottom: 18px;
        }

        .clearfix:before,
        .clearfix:after {
            display: table;
            content: "";
        }
        .clearfix:after {
            clear: both
        }

        .box-card {
            width: 40%;
        }
    </style>
</head>
<body>
<div id="app">
    <!--搜索框-->
    <div style="width:100%;height:100px;padding: 20px;
            background-image: url('/images/f.jpg');background-repeat: no-repeat;background-size: 100% 100%">
        <div style="width: 400px">
            <el-form label-width="130px">
                <el-form-item label="输入商品激光码：">
                    <el-input v-model="code"
                              placeholder="请输入商品激光码"
                              clearable>
                        <el-button slot="append" icon="el-icon-search" @click="search">搜索</el-button>
                    </el-input>
                </el-form-item>
            </el-form>
        </div>
    </div>
    <!--分割线-->
    <div>
        <el-divider content-position="left"><span style="font-size: 25px">激光码信息</span></el-divider>
    </div>
    <!--表格数据-->
    <div :style="'display:'+tableFlag" >
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span style="font-size: 20px">详细信息</span>
            </div>
            <div class="text item">
                <el-form>
                    <el-form-item label="激光码:" label-width="120px">
                        <el-input v-model="formData.lcode" autocomplete="off" :readonly="true"></el-input>
                    </el-form-item>
                    <el-form-item label="公司名称:" label-width="120px">
                        <el-input v-model="formData.companyName" autocomplete="off" :readonly="true"></el-input>
                    </el-form-item>
                    <el-form-item label="订单号:" label-width="120px">
                        <el-input v-model="formData.orderId" autocomplete="off" :readonly="true"></el-input>
                    </el-form-item>
                    <el-form-item label="商品编号:" label-width="120px">
                        <el-input v-model="formData.pnumber" autocomplete="off" :readonly="true"></el-input>
                    </el-form-item>
                    <el-form-item label="商品名称:" label-width="120px">
                        <el-input v-model="formData.pname" autocomplete="off" :readonly="true"></el-input>
                    </el-form-item>
                    <el-form-item label="商品质量:" label-width="120px">
                        <el-input v-model="formData.pquality" autocomplete="off" :readonly="true"></el-input>
                    </el-form-item>
                </el-form>
            </div>
        </el-card>
    </div>
</div>
</body>
<script src="/vue/vue.js"></script>
<script src="/elementui/index.js"></script>
<script src="/axios/axios.min.js"></script>
<script>
    new Vue({
        el:"#app",
        data(){
            return{
                formData: [],
                code:'', //商品号
                tableFlag:'none'
            }
        },
        methods:{
            //搜索查询
            search(){
                if(this.code!=''){
                    axios.get("/productlaser/"+this.code).then(value => {
                        if(value.data.state===1){
                            console.log(value.data);
                            if(value.data.data==null){
                                this.$message({
                                    message:"没有查询到数据！",
                                    type:"warning"
                                });
                                this.formData=[];
                            }else {
                                this.tableFlag='inline';
                                this.formData=value.data.data;
                            }
                        }
                    })
                }else {
                    this.$message.error("请输入激光码！！");
                }
            }
        }
    });
</script>
</html>